<template>
  <view class="ai-help-container">
    <!--// 装饰背景元素 -->
    
    <!-- 顶部导航栏 -->
    <view class="navigation-bar">
      <view class="back-button" @click="handleBack">
        <view class="back-icon">
          <text>←</text>
        </view>
      </view>
      <view class="nav-title">
        <span class="ai-title-gradient">AI 助手</span>
      </view>
    
    </view>

    <!-- 聊天消息区域 -->
    <scroll-view class="chat-container" scroll-y="true" :scroll-top="scrollTop">
      <!-- 欢迎消息卡片 -->
      <view class="welcome-card">
        <view class="welcome-header">
          <view class="welcome-avatar">
            <view class="sparkles">
              <view class="sparkle"></view>
              <view class="sparkle"></view>
              <view class="sparkle"></view>
            </view>
            <text class="avatar-text">AI</text>
          </view>
          <view class="welcome-title">
            <text>CloudKitchen AI</text>
          </view>
        </view>
        <view class="welcome-content">
          <text class="welcome-text">您好！我是CloudKitchen的AI助手，有什么可以帮助您的吗？
            我可以解答关于应用使用、食谱推荐、烹饪技巧等问题。</text>
        </view>
      </view>

      <!-- 示例问题 -->
      <view class="example-questions">
        <text class="example-label">✨ 试试这些问题：</text>
        <view class="example-tags">
          <view class="example-tag" v-for="(tag, index) in exampleTags" :key="index" @click="sendExampleQuestion(tag)">
            <text>{{ tag }}</text>
          </view>
        </view>
      </view>

      <!-- 消息列表 -->
      <view v-for="(message, index) in messages" :key="index" class="message-row">
        <view v-if="message.sender === 'user'" class="message-wrapper user-message">
          <view class="message-content">
            <text class="message-text">{{ message.content }}</text>
          </view>
          <view class="avatar user-avatar">
            <text class="avatar-text">你</text>
          </view>
        </view>
        <view v-else class="message-wrapper ai-message">
          <view class="avatar ai-avatar">
            <view class="ai-pulse"></view>
            <text class="avatar-text">AI</text>
          </view>
          <view class="message-content">
            <text class="message-text">{{ message.content }}</text>
          </view>
        </view>
      </view>

      <!-- 加载中提示 -->
      <view v-if="isTyping" class="message-wrapper ai-message">
        <view class="avatar ai-avatar">
          <view class="ai-pulse"></view>
          <text class="avatar-text">AI</text>
        </view>
        <view class="message-content">
          <view class="typing-indicator">
            <view class="typing-dot"></view>
            <view class="typing-dot"></view>
            <view class="typing-dot"></view>
          </view>
        </view>
      </view>

      <!-- 底部空间，确保内容不被输入框遮挡 -->
      <view class="bottom-space"></view>
    </scroll-view>

    <!-- 输入区域 -->
    <view class="input-container">
      <view class="input-wrapper">
        <input 
          class="input-box" 
          v-model="inputText" 
          placeholder="请输入您的问题..." 
          @confirm="sendMessage"
          :disabled="isTyping"
        />
        <button 
          class="send-button" 
          @click="sendMessage" 
          :disabled="!inputText.trim() || isTyping"
        >
          <view class="send-icon" :class="{ 'active': inputText.trim() && !isTyping }">
            <text>→</text>
          </view>
        </button>
      </view>
    </view>
    

  </view>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      inputText: '',
      scrollTop: 0,
      isTyping: false,
      responseTimeout: null,
  
      exampleTags: [
        '如何创建一个新食谱？',
        '推荐几个简单的早餐食谱',
        '如何使用收藏功能？',
        '烹饪技巧分享'
      ]
    }
  },
  mounted() {
    // 页面加载后滚动到底部
    this.$nextTick(() => {
      this.scrollToBottom();
    });
  },
  
  // 页面卸载时清理定时器
  beforeUnmount() {
    // 清理所有定时器
    if (this.responseTimeout) {
      clearTimeout(this.responseTimeout);
    }
  },
  methods: {
    // 返回到个人中心页面（tabBar页面）
    handleBack() {
      uni.switchTab({
        url: '/pages/profile/profile'
      });
    },
    
    // 发送消息
    sendMessage() {
      if (!this.inputText.trim() || this.isTyping) return;
      
      const userMessage = {
        sender: 'user',
        content: this.inputText.trim(),
        timestamp: new Date().getTime()
      };
      
      this.messages.push(userMessage);
      this.inputText = '';
      
      // 滚动到底部
      this.$nextTick(() => {
        this.scrollToBottom();
      });
      
      // 模拟AI回复
      this.simulateAIResponse(userMessage.content);
    },
    
    // 发送示例问题
    sendExampleQuestion(question) {
      if (this.isTyping) return;
      
      const userMessage = {
        sender: 'user',
        content: question,
        timestamp: new Date().getTime()
      };
      
      this.messages.push(userMessage);
      
      // 滚动到底部
      this.$nextTick(() => {
        this.scrollToBottom();
      });
      
      // 模拟AI回复
      this.simulateAIResponse(question);
    },
    
    // 模拟AI回复（为后续接口接入做准备）
    simulateAIResponse(question) {
      this.isTyping = true;
      
      // 清理之前的定时器
      if (this.responseTimeout) {
        clearTimeout(this.responseTimeout);
      }
      
      // 模拟AI思考时间
      this.responseTimeout = setTimeout(() => {
        let responseText = '';
        
        // 根据问题内容给出不同的模拟回复
        if (question.includes('创建') || question.includes('新食谱')) {
          responseText = '要创建新食谱，您可以点击底部导航栏的"创建"按钮，然后按照提示填写食谱名称、材料、步骤等信息。完成后点击保存即可分享您的创意食谱！';
        } else if (question.includes('早餐') || question.includes('推荐')) {
          responseText = '以下是几个简单美味的早餐食谱推荐：\n1. 牛油果吐司：全麦面包烤至金黄，铺上切片牛油果，撒少许盐和黑胡椒。\n2. 燕麦粥：燕麦片加牛奶煮软，可加入水果、坚果和蜂蜜调味。\n3. 蔬菜蛋卷：将鸡蛋打散煎成薄饼，卷入切碎的蔬菜和火腿。';
        } else if (question.includes('收藏') || question.includes('功能')) {
          responseText = '收藏功能使用方法：在浏览食谱详情页时，点击页面顶部的心形图标即可收藏。收藏后的食谱可以在个人中心的"我的收藏"中查看。您也可以对喜欢的食谱点赞，支持作者！';
        } else if (question.includes('技巧') || question.includes('烹饪')) {
          responseText = '一些实用的烹饪技巧：\n1. 煮意面时，水要加盐，煮好后过冷水可以保持口感。\n2. 切洋葱前放入冰箱冷藏15分钟，可以减少流泪。\n3. 炒菜时热锅冷油，能更好地锁住食材的营养和味道。';
        } else {
          responseText = '感谢您的提问！我正在学习更多关于CloudKitchen的知识，以便更好地为您服务。如果您有具体的问题，可以尝试使用上方的示例问题，或者描述您遇到的具体情况。\n\n提示：在实际使用中，这里将接入AI接口为您提供更智能的回答。';
        }
        
        const aiMessage = {
          sender: 'ai',
          content: responseText,
          timestamp: new Date().getTime()
        };
        
        this.messages.push(aiMessage);
        this.isTyping = false;
        this.responseTimeout = null;
        
        // 滚动到底部
        this.$nextTick(() => {
          this.scrollToBottom();
        });
      }, 1500); // 模拟1.5秒的响应时间
    },
    
    // 滚动到底部 - 使用Vue 3友好的方式
    scrollToBottom() {
      // 使用$nextTick确保DOM更新完成
      this.$nextTick(() => {
        // 直接设置scrollTop为一个很大的值，滚动到底部
        this.scrollTop = 999999;
      });
    }
  }
}
</script>

<style lang="scss">
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.ai-help-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  background-color: #f5f7fa;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;

  // 导航栏样式
  .navigation-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 20px;
    background-color: transparent;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 100;

    .back-button {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 50%;
      transition: all 0.2s ease;

      &:active {
        background-color: rgba(0, 0, 0, 0.05);
      }

      .back-icon {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;
        font-size: 24px;
        font-weight: 300;
      }
    }

    .nav-title {
      font-size: 20px;
      font-weight: 700;
      
      .ai-title-gradient {
        color: #ff6b6b;
      }
    }


  }

  // 聊天容器
  .chat-container {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    /* 隐藏滚动条 - 跨浏览器兼容 */
    -ms-overflow-style: none; 
    scrollbar-width: none;
    
    &::-webkit-scrollbar {
      display: none; /* Chrome, Safari and Opera */
    }
    
    /* 确保滚动功能正常工作 */
    scroll-behavior: smooth;
  }

    // 欢迎卡片样式
    .welcome-card {
      background-color: #ff6b6b;
      border-radius: 20px;
      padding: 20px;
      margin-bottom: 24px;
      color: white;
      box-shadow: 0 8px 32px rgba(255, 107, 107, 0.3);
      animation: welcomeSlideIn 0.5s ease-out;
      
      .welcome-header {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        
        .welcome-avatar {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.2);
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          margin-right: 12px;
          
          .sparkles {
            position: absolute;
            width: 100%;
            height: 100%;
            
            .sparkle {
              position: absolute;
              width: 8px;
              height: 8px;
              background-color: rgba(255, 255, 255, 0.8);
              border-radius: 50%;
              animation: sparkle 2s infinite;
              
              &:nth-child(1) {
                top: -5px;
                left: 50%;
                transform: translateX(-50%);
              }
              
              &:nth-child(2) {
                bottom: -5px;
                right: 10px;
                animation-delay: 0.6s;
              }
              
              &:nth-child(3) {
                top: 10px;
                right: -5px;
                animation-delay: 1.2s;
              }
            }
          }
          
          .avatar-text {
            font-size: 18px;
            font-weight: 700;
            color: white;
          }
        }
        
        .welcome-title {
          font-size: 18px;
          font-weight: 600;
        }
      }
      
      .welcome-content {
        
        .welcome-text {
          font-size: 15px;
          line-height: 1.6;
          opacity: 0.95;
        }
      }
    }

    // 消息行
    .message-row {
      animation: messageSlideIn 0.4s ease-out;
    }
    
    // 消息包装器
    .message-wrapper {
      display: flex;
      margin-bottom: 20px;

      // AI消息样式
      &.ai-message {
        justify-content: flex-start;

        .message-content {
          background-color: #ffffff;
          border: 1px solid #e8e9ec;
          margin-left: 16px;
          max-width: 80%;
          position: relative;
          
          &::before {
            content: '';
            position: absolute;
            top: 12px;
            left: -8px;
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-right: 8px solid #ffffff;
          }
        }
      }

      // 用户消息样式
      &.user-message {
        justify-content: flex-end;

        .message-content {
          background-color: #ff6b6b;
          color: #ffffff;
          margin-right: 16px;
          max-width: 80%;
          position: relative;
          
          &::after {
            content: '';
            position: absolute;
            top: 12px;
            right: -8px;
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-left: 8px solid #ff6b6b;
          }
        }
      }

      // 头像样式
      .avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex-shrink: 0;

        .avatar-text {
          font-weight: 700;
          font-size: 16px;
        }
      }

      .ai-avatar {
        background-color: #ff6b6b;
        box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
        
        .ai-pulse {
          position: absolute;
          top: -4px;
          left: -4px;
          right: -4px;
          bottom: -4px;
          border: 2px solid rgba(255, 107, 107, 0.3);
          border-radius: 50%;
          animation: pulse 2s infinite;
        }

        .avatar-text {
          color: #ffffff;
        }
      }

      .user-avatar {
        background-color: #ff8e8e;
        box-shadow: 0 4px 12px rgba(255, 142, 142, 0.3);

        .avatar-text {
          color: #ffffff;
        }
      }

      // 消息内容样式
      .message-content {
        padding: 14px 18px;
        border-radius: 18px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
        transition: all 0.3s ease;

        .message-text {
          font-size: 15px;
          line-height: 1.5;
          white-space: pre-wrap;
          word-break: break-word;
        }
      }

      // 打字指示器
      .typing-indicator {
        display: flex;
        align-items: center;
        padding: 10px 0;

        .typing-dot {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #ff6b6b;
          margin-right: 8px;
          animation: typing 1.4s infinite both;

          &:nth-child(2) {
            animation-delay: 0.2s;
          }

          &:nth-child(3) {
            animation-delay: 0.4s;
            margin-right: 0;
          }
        }
      }
    }

    // 示例问题样式
    .example-questions {
      margin-bottom: 24px;
      animation: fadeIn 0.5s ease-out 0.2s both;

      .example-label {
        display: block;
        font-size: 15px;
        color: #666;
        margin-bottom: 12px;
        font-weight: 600;
      }

      .example-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        .example-tag {
          padding: 10px 16px;
          background-color: #ffffff;
          border: 1px solid #e8e9ec;
          border-radius: 24px;
          font-size: 14px;
          color: #ff6b6b;
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
          position: relative;
          overflow: hidden;
          
          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 107, 107, 0.1), transparent);
            transition: left 0.5s;
          }
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(255, 107, 107, 0.15);
            border-color: rgba(255, 107, 107, 0.3);
          }
          
          &:active {
            transform: translateY(0);
            
            &::before {
              left: 100%;
            }
          }
        }
      }
    }

    // 底部空间
    .bottom-space {
      height: 100px;
    }
  }

  // 输入容器
  .input-container {
    padding: 16px 20px 24px;
    background-color: transparent;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 100;
    
    .input-wrapper {
      display: flex;
      align-items: center;
      background-color: #ffffff;
      border-radius: 28px;
      padding: 4px;
      box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;
      
      &:focus-within {
        box-shadow: 0 -2px 20px rgba(255, 107, 107, 0.15);
      }
    }

    .input-box {
      flex: 1;
      height: 48px;
      padding: 0 20px;
      background-color: transparent;
      border-radius: 24px;
      font-size: 15px;
      color: #333;
      border: none;
      outline: none;
      margin-right: 4px;
      transition: all 0.3s ease;

      &::placeholder {
        color: #999;
        font-size: 14px;
      }

      &:disabled {
        opacity: 0.6;
      }
      
      &.sent-animation {
        animation: inputSent 0.3s ease;
      }
    }

    .send-button {
      height: 48px;
      width: 48px;
      padding: 0;
      background-color: transparent;
      border-radius: 50%;
      border: none;
      outline: none;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:not(:disabled) {
        .send-icon {
          background-color: #667eea;
        }
      }
      
      &:disabled {
        opacity: 0.4;
        
        .send-icon {
          background-color: #e0e0e0;
        }
      }
    }
    
    .send-icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 18px;
      font-weight: 600;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
      
      &.active {
        animation: sendButtonPulse 0.5s ease;
      }
    }



  @keyframes welcomeSlideIn {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  
  @keyframes messageSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes typing {
    0% {
      transform: translateY(0);
      opacity: 0.7;
    }
    50% {
      transform: translateY(-4px);
      opacity: 1;
    }
    100% {
      transform: translateY(0);
      opacity: 0.7;
    }
  }
  
  @keyframes pulse {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.2);
      opacity: 0;
    }
    100% {
      transform: scale(1);
      opacity: 0;
    }
  }
  
  @keyframes sparkle {
    0% {
      opacity: 0;
      transform: scale(0.5);
    }
    50% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(0.5);
    }
  }
  
  @keyframes sendButtonPulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes inputSent {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(4px);
    }
    100% {
      transform: translateX(0);
    }
  }
}
</style>